<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行计划生成器</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        header {
            background-color: #1e88e5;
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
        }
        .input-container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        #jsonInput {
            width: 100%;
            height: 200px;
            padding: 10px;
            font-family: monospace;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
        }
        .button-container {
            text-align: center;
            margin: 20px 0;
        }
        button {
            background-color: #1e88e5;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #1565c0;
        }
        .template-button {
            background-color: #4caf50;
            margin-left: 10px;
        }
        .template-button:hover {
            background-color: #388e3c;
        }
        .overview-container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .overview-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
        }
        .overview-item {
            border-left: 4px solid #1e88e5;
            padding-left: 15px;
            margin-bottom: 10px;
        }
        .day-container {
            background-color: white;
            border-radius: 8px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .day-header {
            background-color: #1e88e5;
            color: white;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .event-container {
            padding: 20px;
            border-bottom: 1px solid #eee;
        }
        .event-time {
            font-weight: bold;
            color: #1e88e5;
            margin-bottom: 5px;
        }
        .event-activity {
            font-size: 1.2em;
            margin-bottom: 10px;
        }
        .event-details {
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 5px;
            margin-top: 10px;
        }
        .tips-container {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .tip-item {
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
        }
        .tip-item:before {
            content: "•";
            color: #1e88e5;
            font-weight: bold;
            margin-right: 10px;
        }
        .detail-label {
            font-weight: bold;
            color: #555;
        }
        h1, h2, h3 {
            margin-top: 0;
        }
        #planDisplay {
            display: none;
        }
        #errorMessage {
            color: #f44336;
            font-weight: bold;
            margin: 10px 0;
            display: none;
        }
    </style>
</head>
<body>
    <header>
        <h1>旅行计划生成器</h1>
        <p>输入JSON格式的旅行计划，一键生成美观的行程安排</p>
    </header>

    <div class="input-container">
        <h2>输入旅行计划JSON</h2>
        <textarea id="jsonInput" placeholder="在此粘贴您的旅行计划JSON数据..."></textarea>
        <div id="errorMessage"></div>
        <div class="button-container">
            <button id="generateBtn">生成旅行计划</button>
            <button id="loadTemplateBtn" class="template-button">加载模板示例</button>
        </div>
    </div>

    <div id="planDisplay">
        <section id="overviewSection" class="overview-container">
            <h2>旅行概览</h2>
            <div id="overviewGrid" class="overview-grid">
                <!-- 概览内容将在这里动态生成 -->
            </div>
        </section>

        <section id="itinerarySection">
            <!-- 行程内容将在这里动态生成 -->
        </section>

        <section id="tipsSection" class="tips-container">
            <h2>旅行提示</h2>
            <div id="tipsContainer">
                <!-- 提示内容将在这里动态生成 -->
            </div>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const jsonInput = document.getElementById('jsonInput');
            const generateBtn = document.getElementById('generateBtn');
            const loadTemplateBtn = document.getElementById('loadTemplateBtn');
            const planDisplay = document.getElementById('planDisplay');
            const errorMessage = document.getElementById('errorMessage');
            
            const overviewGrid = document.getElementById('overviewGrid');
            const itinerarySection = document.getElementById('itinerarySection');
            const tipsContainer = document.getElementById('tipsContainer');

            // 添加模板示例
            const templateJSON = {
                "overview": {
                    "arrivalAirport": "抵达机场名称 (机场代码)",
                    "departureAirport": "离境机场名称 (机场代码)",
                    "tripDuration": "行程时长，例如：7天6晚",
                    "policy": "适用的签证政策或其他政策信息",
                    "transportation": "主要交通方式，例如：地铁 + 公交 + 出租车",
                    "transportationCost": "预计交通总费用"
                },
                "itinerary": [
                    {
                        "day": "第1天",
                        "theme": "当天主题",
                        "events": [
                            {
                                "time": "时间段，例如：09:00-10:30",
                                "activity": "活动名称",
                                "details": {
                                    "highlights": "活动亮点或特色",
                                    "transportation": "到达该地点的交通方式"
                                }
                            },
                            {
                                "time": "时间段，例如：11:00-14:00",
                                "activity": "活动名称",
                                "details": {
                                    "features": "特色内容或设施",
                                    "dining": "用餐建议或地点"
                                }
                            }
                        ]
                    },
                    {
                        "day": "第2天",
                        "theme": "当天主题",
                        "events": [
                            {
                                "time": "时间段",
                                "activity": "活动名称",
                                "details": {
                                    "essence": "精华体验",
                                    "transportation": "交通方式"
                                }
                            },
                            {
                                "time": "时间段",
                                "activity": "活动名称",
                                "details": {
                                    "history": "历史背景或特色",
                                    "tip": "小贴士或建议"
                                }
                            }
                        ]
                    }
                ],
                "tips": {
                    "visaValidity": "签证有效期信息",
                    "weatherPreparation": "天气信息和建议着装",
                    "transportTips": "交通建议和应用推荐",
                    "emergencyContact": "紧急联系电话或方式",
                    "remarks": "其他备注信息"
                }
            };

            // 加载模板示例
            loadTemplateBtn.addEventListener('click', function() {
                jsonInput.value = JSON.stringify(templateJSON, null, 2);
            });

            // 生成旅行计划
            generateBtn.addEventListener('click', function() {
                try {
                    // 清空之前的内容
                    overviewGrid.innerHTML = '';
                    itinerarySection.innerHTML = '';
                    tipsContainer.innerHTML = '';
                    errorMessage.style.display = 'none';
                    
                    // 解析JSON
                    const planData = JSON.parse(jsonInput.value);
                    
                    // 生成概览部分
                    if (planData.overview) {
                        for (const [key, value] of Object.entries(planData.overview)) {
                            // 转换键名为展示用的标签
                            let label;
                            switch (key) {
                                case 'arrivalAirport': label = '抵达机场'; break;
                                case 'departureAirport': label = '离境机场'; break;
                                case 'tripDuration': label = '行程时长'; break;
                                case 'policy': label = '签证政策'; break;
                                case 'transportation': label = '交通方式'; break;
                                case 'transportationCost': label = '交通费用'; break;
                                default: label = key; // 使用原始键名
                            }
                            
                            const overviewItem = document.createElement('div');
                            overviewItem.className = 'overview-item';
                            overviewItem.innerHTML = `<p><span class="detail-label">${label}：</span>${value}</p>`;
                            overviewGrid.appendChild(overviewItem);
                        }
                    }
                    
                    // 生成行程部分
                    if (planData.itinerary && Array.isArray(planData.itinerary)) {
                        planData.itinerary.forEach(day => {
                            const dayContainer = document.createElement('div');
                            dayContainer.className = 'day-container';
                            
                            // 添加日期和主题
                            const dayHeader = document.createElement('div');
                            dayHeader.className = 'day-header';
                            dayHeader.innerHTML = `<h2>${day.day}</h2><h3>${day.theme || ''}</h3>`;
                            dayContainer.appendChild(dayHeader);
                            
                            // 添加事件
                            if (day.events && Array.isArray(day.events)) {
                                day.events.forEach(event => {
                                    const eventContainer = document.createElement('div');
                                    eventContainer.className = 'event-container';
                                    
                                    // 添加时间和活动
                                    const eventTime = document.createElement('div');
                                    eventTime.className = 'event-time';
                                    eventTime.textContent = event.time;
                                    eventContainer.appendChild(eventTime);
                                    
                                    const eventActivity = document.createElement('div');
                                    eventActivity.className = 'event-activity';
                                    eventActivity.textContent = event.activity;
                                    eventContainer.appendChild(eventActivity);
                                    
                                    // 添加详细信息
                                    if (event.details) {
                                        const eventDetails = document.createElement('div');
                                        eventDetails.className = 'event-details';
                                        
                                        for (const [key, value] of Object.entries(event.details)) {
                                            // 转换键名为展示用的标签
                                            let label;
                                            switch (key) {
                                                case 'highlights': label = '亮点'; break;
                                                case 'transportation': label = '交通'; break;
                                                case 'features': label = '特色'; break;
                                                case 'dining': label = '用餐'; break;
                                                case 'essence': label = '精华'; break;
                                                case 'history': label = '历史'; break;
                                                case 'tip': label = '提示'; break;
                                                case 'recommendation': label = '建议'; break;
                                                case 'safety': label = '安全'; break;
                                                case 'activity': label = '活动'; break;
                                                case 'photography': label = '摄影'; break;
                                                case 'spring': label = '春季'; break;
                                                case 'autumn': label = '秋季'; break;
                                                case 'feature': label = '特点'; break;
                                                case 'transition': label = '转换'; break;
                                                case 'lastShopping': label = '最后购物'; break;
                                                case 'note': label = '备注'; break;
                                                default: label = key; // 使用原始键名
                                            }
                                            
                                            eventDetails.innerHTML += `<p><span class="detail-label">${label}：</span>${value}</p>`;
                                        }
                                        
                                        eventContainer.appendChild(eventDetails);
                                    }
                                    
                                    dayContainer.appendChild(eventContainer);
                                });
                            }
                            
                            itinerarySection.appendChild(dayContainer);
                        });
                    }
                    
                    // 生成提示部分
                    if (planData.tips) {
                        for (const [key, value] of Object.entries(planData.tips)) {
                            // 转换键名为展示用的标签
                            let label;
                            switch (key) {
                                case 'visaValidity': label = '签证有效期'; break;
                                case 'weatherPreparation': label = '天气准备'; break;
                                case 'transportTips': label = '交通提示'; break;
                                case 'emergencyContact': label = '紧急联系'; break;
                                case 'remarks': label = '备注'; break;
                                default: label = key; // 使用原始键名
                            }
                            
                            const tipItem = document.createElement('div');
                            tipItem.className = 'tip-item';
                            tipItem.innerHTML = `<p><span class="detail-label">${label}：</span>${value}</p>`;
                            tipsContainer.appendChild(tipItem);
                        }
                    }
                    
                    // 显示计划内容
                    planDisplay.style.display = 'block';
                    
                } catch (error) {
                    // 显示错误信息
                    errorMessage.textContent = `解析JSON时出错: ${error.message}`;
                    errorMessage.style.display = 'block';
                    planDisplay.style.display = 'none';
                }
            });
        });
    </script>
</body>
</html>
